<template>
    <div class="distribution-set">
        <div class="distribution-set-header">
            <span class="name">分销员功能</span
            ><el-switch
                class="custom-switch"
                v-model="form.switchOn"
                :active-value="true"
                :inactive-value="false"
                :before-change="handleBeforeChange" />
            <span class="tip">关闭后，系统不再产生佣金，请谨慎操作。</span>
        </div>
        <!-- tab -->
        <template v-if="tabActiveName">
            <el-tabs v-model="tabActiveName">
                <el-tab-pane
                    v-for="{ name, label } in detailTabs"
                    :key="name"
                    :label="label"
                    :name="name"></el-tab-pane>
            </el-tabs>
            <component :is="componentId"></component>
        </template>
        <template v-else>
            <div>没有任何页面查看权限，请前往账号管理页面配置分销设置页面权限</div>
        </template>
    </div>
</template>

<script setup>
import { ref, computed, defineAsyncComponent, reactive, watch, onMounted, onUnmounted } from 'vue';
import store from '@/store/index';
import { ElMessage, ElMessageBox } from 'element-plus';
import request from '@/request/index';
import { setLayout, resetLayout } from '@/hooks/layout';

const detailTabs = [
    { name: 'base', label: '基础设置' },
    { name: 'apply', label: '申请页面' },
    { name: 'drainage', label: '企微引流' }
];
const useAuth = store.useAuthStore();
const permissions = useAuth.permissions;
const auth = reactive([
    permissions.has('distribution_set:base_view'),
    permissions.has('distribution_set:apply_view'),
    permissions.has('distribution_set:wechat_view')
]);
let tabActiveName = ref('base');

const form = reactive({
    switchOn: false // todo:false
});

const componentId = computed(() => {
    const defineAsyncComponents = {
        base: defineAsyncComponent(() => import('./base.vue')),
        apply: defineAsyncComponent(() => import('./apply.vue')),
        drainage: defineAsyncComponent(() => import('./drainage.vue')),
        noAuth: defineAsyncComponent(() => import('./noAuth.vue'))
    };
    const index = detailTabs.findIndex(item => item.name === tabActiveName.value);
    const componentName = auth[index] ? tabActiveName.value : 'noAuth';
    return defineAsyncComponents[componentName] || null;
});
// const detailTabsCopy = computed(() => {
//     const tabs = [];
//     if (auth[0]) {
//         tabs.push(detailTabs[0]);
//     }
//     if (auth[1]) {
//         tabs.push(detailTabs[1]);
//     }
//     if (auth[2]) {
//         tabs.push(detailTabs[2]);
//     }
//     return tabs;
// });
const saveConfig = () => {};

const handleBeforeChange = async () => {
    const desc = form.switchOn ? '*关闭后，系统不再产生佣金，请谨慎操作。' : '确认要开启吗？';
    return await ElMessageBox.confirm(desc, '提示信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            await request('distributionSettingsSwitch', { switchOn: !form.switchOn });
            ElMessage({
                type: 'success',
                message: '保存成功'
            });
            return true;
        })
        .catch(() => {
            return false;
        });
};

const getConfig = async () => {
    const { data } = await request('distributionSettingsConfigs');
    form.switchOn = (data || {})?.info?.distributeSwitchOn || false;
};

onMounted(() => {
    setLayout('custom-position-relative', 'layout-box');
    getConfig();
});
onUnmounted(() => {
    resetLayout('custom-position-relative', 'layout-box');
});
</script>

<style lang="scss">
.custom-position-relative {
    position: relative;
}
</style>
<style lang="scss" scoped>
.distribution-set {
    :deep {
        .el-tabs {
            --el-tabs-header-height: 60px;
        }
        .el-tabs__item {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #35383a;
            &.is-active {
                color: #ff6b00;
            }
        }
        .el-tabs__nav-wrap::after {
            height: 1px;
        }
    }
    &-header {
        background: #fffaf9;
        border: 1px solid #facaa8;
        display: flex;
        align-items: center;
        height: 48px;
        padding-left: 16px;
        .name {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #33302d;
            margin-right: 12px;
        }
        .tip {
            margin-left: 8px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #969696;
        }
    }
}
</style>
